<!--HTML-->
<!-- 注册页面 -->
<template>
  <div>
    <div id="header">
      <p>用户注册</p>
    </div>
    <div id="shuru">
      <input
        type="text"
        id="username"
        placeholder="输入账号"
        v-model="username"
      />
      <span class="hint">{{ nametishi }}</span>
      <input type="text" id="mypwd" placeholder="输入密码" v-model="password" />
      <span class="hint">{{ pwdtishi }}</span>
      <div id="xieyi">
        <input type="checkbox" class="rember" id="xuanzhong" v-model="xuan" />
        <a href="#">我同意《凡科网平台注册协议》</a>
      </div>
      <mt-button type="primary" @click="btnlogin" size="large" class="button" :disabled="!xuan">
        免费注册
      </mt-button>
      <p class="change_link">
        <span class="text">已有账号 ?</span>          
        <a href="#" class="to_login"> 直接登录 </a>          
      </p>
    </div>
  </div>
</template>


<!--JavaScript-->
<script>
import { MessageBox } from "mint-ui";

export default {
  data() {
    return {
      username: "",
      password: "",
      nametishi: "",
      pwdtishi: "",
      xuan:false
    };
  },
  methods: {
    btnlogin() {
      this.axios.post('http://pw.clianmaimai.com:8071/dn/insert_user',`user_name=${this.username}&user_pwd=${this.password}`)
       .then((result) => {
          console.log(this.username, this.password);
          console.log(result.data);
          this.$router.push('/loginz');
        });
    },
  },
  watch: {
    username() {
      let reg = /^\w{6,18}$/;
      if (reg.test(this.username) != true) {
        this.nametishi = "请输入6到18个字母或数字";
      } else {
        console.log("成功");
        this.nametishi = " ";
      }
    },
    password() {
      let regs = /^[0-9,a-z,A-Z]{6,12}$/;
      if (regs.test(this.password) != true) {
        this.pwdtishi = "请输入6-12数字字母混合密码";
      } else {
        console.log("成功");
        this.pwdtishi = "";
      }
    },
  },
};
</script>


<!--CSS-->
<style scoped>
input {
  padding: 2vh;
  padding-left: 10vw;
  width: 50vw;
  display: block;
  border: 1px rgb(186, 186, 190) solid;
  border-radius: 25px;
  outline: none;
  /* background: url("../assets/个人客户.png"); */
  background-size: 10%;
  background-repeat: no-repeat;
  background-position: 1vh center;
}
#username,
#mypwd {
  margin: 0 auto;
  margin-bottom: 2vh;
}
#shuru {
  margin-top: 30%;
  text-align: center;
}
.button {
  height: 7vh;
  width: 65vw;
  border-radius: 25px;
  margin: 0 auto;
  margin-top: 7vh;
}
p {
  font-size: 25px;
  color: rgb(242, 247, 252);
  line-height: 10vh;
  text-align: center;
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  height: 10vh;
  background-color: rgb(38, 162, 255);
}
.change_link {
  text-align: center;
  font-size: 10px;
  color: rgb(165, 165, 173);
}
#xieyi {
  font-size: 10px;
  margin-bottom: 8vw;

}
#xuanzhong{
    margin:0 auto;
}
.rember {
  width: 10vw;
  display: inline;
  margin-left: 15vw;
}
.hint{
    color: red;
    font-size: 13px;
    line-height: 10vh;
  }
</style>